<template>
    <div>
        <a-modal :title="form.id ? '编辑路标' : '新建路标'" centered v-model:visible="visible" :width="600" @cancel="handleCancel">
            <a-form ref="ruleFormRef" layout="inline" :model="form" :rules="rules">
                <a-row>
                    <a-col :span="20">
                        <a-form-item label="产品" v-if="visible" name="catalogCode">
                            <div>
                                <SelectCatalogCode v-model:value="form.catalogCode" :searchQuery="{ type: 3 }" />
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="路标名称" v-if="visible" name="signpostName">
                            <div>
                                <span v-if="disabled">
                                    {{ form.signpostName }}
                                </span>
                                <a-input v-model:value="form.signpostName" placeholder="请输入" v-else />
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="开始日期" v-if="visible" name="startTime">
                            <div>
                                <span v-if="disabled"> {{ form.startTime }}</span>
                                <h-date-picker-cell v-model:value="form.startTime" :disabledDate="false" v-else />
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="结束日期" v-if="visible" name="endTime">
                            <div>
                                <span v-if="disabled"> {{ form.endTime }}</span>
                                <h-date-picker-cell v-model:value="form.endTime" :disabledDate="false" v-else />
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <template #footer>
                <a-button type="primary" @click="handleOk">保存</a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { HDatePickerCell, SelectCatalogCode } from '@/components';
import { defineComponent, reactive, toRefs, ref, unref, nextTick } from 'vue';
export default defineComponent({
    components: {
        HDatePickerCell,
        SelectCatalogCode
    },
    props: {
        disabled: {
            type: Boolean,
            default: false
        }
    },
    emits: ['success'],
    setup(_, { emit }) {
        const ruleFormRef = ref<any>();
        const state = reactive<any>({
            form: {
                id: null,
                signpostName: '',
                catalogCode: '',
                startTime: '',
                endTime: '',
                verMgtId: null
            },
            visible: false
        });
        const rules = {
            startTime: [{ required: true, message: '开始日期不能为空', trigger: 'blur' }],
            endTime: [{ required: true, message: '结束日期不能为空', trigger: 'blur' }],
            signpostName: [{ required: true, message: '路标名称不能为空', trigger: 'blur' }],
            catalogCode: [{ required: true, message: '产品不能为空', trigger: 'blur' }]
        };
        const handleReset = () => {
            state.form = {
                id: null,
                signpostName: '',
                catalogCode: '',
                startTime: '',
                endTime: '',
                verMgtId: null
            };
        };
        const open = () => {
            handleReset();
            state.visible = true;
            nextTick(() => {
                unref(ruleFormRef) && unref(ruleFormRef).clearValidate();
            });
        };
        const handleSave = async () => {
            const query = {
                ...state.form
            };
            const { success } = await api.signpostModel.save(query);
            if (success) {
                emit('success');
                handleCancel();
            }
        };
        const handleOk = async () => {
            unref(ruleFormRef)
                .validate()
                .then(() => {
                    handleSave();
                });
        };
        const handleCancel = () => {
            state.visible = false;
        };
        return {
            ruleFormRef,
            ...toRefs(state),
            rules,
            open,
            handleOk,
            handleCancel
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-form-item-label-left) {
    min-width: 0 !important;
}
</style>